<template>
	<div id="show">
		<h2>系统情况</h2>
		<button @click="changeData" class="btn btn-primary">查看</button>
		
		<div id="myChart" style="width：300px;height:300px">
			
		</div>
		
	</div>
</template>

<script>
let echarts = require('echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
 export default {
		data(){
			return{
				info:{},
				myCharts:'',
				option1:{
					title:{text:'当月系统版块、帖子、评论增长情况'},
					tooltip:{},	
					xAxis:{
						data:["版块","帖子","评论"]
					},
					yAxis:{},
					series:[{
						name:'增长量',
						type:'bar',
						data:[0,0,0]
					}]
				}
			}
		},
		created(){
			this.getInfo();
			
		},
		mounted(){
			this.drawLine();
		},
		methods:{
			getInfo(){
				var dateOne=this.firstDay();
				this.$http.get('/api/getInfo',{params:{
					date1:dateOne
				}}).then(data=>{
					if(data.status ==200){
						this.info=data.body[0];
						
					}
				},err=>{
					console.log(err);
				})
			},
			drawLine(){
				this.myCharts = this.$echarts.init(document.getElementById("myChart"));
				this.myCharts.setOption(this.option1);
				
			},
			firstDay() {
				var dt = new Date();
				var y = dt.getFullYear();
				var m = (dt.getMonth() + 1).toString().padStart(2, "0");
				var d = '01';
				return `${y}-${m}-${d}`
			},
			changeData(){
				
//				temp.series[0].data[this.info.countForum,this.info.countPost,this.info.countComment];
				this.option1.series[0].data=[this.info.countForum,this.info.countPost,this.info.countComment]
				this.myCharts.setOption(this.option1);
				
			}
		}
	}
</script>

<style scoped>
	#show{
		width: 700px;
		margin: 0 auto;
	}
	#myChart{
		width: 300px;
		height: 300px;
		margin:30px auto
	}
</style>